<template>
	<view class="myCoupon">
		<!-- 用户优惠券头部优惠券类型选择 -->
		<view class="myCoupon_redEnvelopeType">
			<u-picker :show="show" :columns="columns" @cancel="cancelRedEnvelope" @confirm="choseRedEnvelope" keyName="label"></u-picker>
			<!-- 红包类型选择 -->
			<view class="myCoupon_redEnvelopeTypeChose" @click="show = true">
				<p style="font-size: 14px;font-weight: bold;color:#B8B8B8;margin-top: 5px;width: 70px;float:left;">{{this.redEnvelopeTypeName}}</p>
				<u-icon name="arrow-down" style="width: 30px;float:left;margin-top:6px;"></u-icon>
			</view>
			<!-- 历史记录 -->
			<p @click="toHistoryRedEnvelope" style="font-size: 14px;font-weight: bold;color:#B8B8B8;margin-top: 5px;float: right;width: 70px;">历史红包</p>
		</view>
		<!-- 优惠券样式 -->
		<view class="myCoupon_redEnvelopeStyle" v-for="item in userCouponList" :key="item.id">
			<image src="../../static/redEnvelopes.png" class="myCoupon_redEnvelopesImg"></image>
			<view class="myCoupon_myCoupon_redEnvelopeStyleBody">
				<p style="font-size: 16px;font-weight: bold;margin-top: 10px;">{{item.couponName}}</p>
				<p style="font-size: 14px;font-weight: bold;color:#FF5A44;;margin-top: 10px;">{{item.updateTime | format}}到期</p>
			</view>
			<view class="myCoupon_redEnvelopePrice">
				<p class="myCoupon_p"><span style="font-size: 14px;font-weight: bold;">￥</span>{{item.couponPrice}}</p>
				<p v-if="item.redEnvelopeType===1" style="margin-top: 6px;color: #747273;font-size: 12px;">无门槛</p>
				<p v-if="item.redEnvelopeType===2" style="margin-top: 6px;color: #747273;font-size: 12px;">满{{item.fullDecrementPrice}}可用</p>
			</view>
			<view class="myCoupon_redEnvelopeBottom">
				<p style="font-size: 12px;color:#747273;margin-top: 20px;margin-left: 10px;width: 120px;float: left;">限外卖到家业务使用</p>
				<u-button  class="myCoupon_CouponButton" color="#FD5735" type="primary" text="去使用" ></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				// 红包类型选择默认flase
				show: false,
				// 红包类型
				columns: [
					[ {
						label: '全部类型',
						id: 0
					},{
						label: '无门槛红包',
						id: 1
						// ...
					}, {
						label: '满减红包',
						id: 2
					}]
				],
				// 从头部获取用户id
				id:'',
				// 红包类型初始化为全部类型
				redEnvelopeTypeName:'全部类型',
				// 红包类型id
				redEnvelopeType:'',
				// 查询用户所有优惠券结果
				userCouponList:[],
				// 现在的时间
				time:'',
			}
		},
		// 将时间过滤出来格式化成yyyy-MM-dd格式的
		filters:{
		    format(value){
			  var date = new Date(value);
			  var tt = [date.getFullYear(), date.getMonth()+1, date.getDate()].join('-') ;
			  return tt;
			}
		},
		methods:{
			// 跳转到过期的红包记录
			toHistoryRedEnvelope(){
				uni.navigateTo({
					url:"/pages/my/myHistoryRedEnvelope"
				})
			},
			// 点击取消选择红包类型
			cancelRedEnvelope(){
				this.show = false
			},
			// 点击选择红包类型
			choseRedEnvelope(e){
				this.redEnvelopeTypeName = e.value[0].label
				this.redEnvelopeType = e.value[0].id
				// 查询用户选中的红包类型优惠券
				this.getUserChoseRedEnvelopeCoupn()
				if(this.redEnvelopeType===0)
					this.getUserReceiveCoupon()
				this.show = false
				
			},
			// 查询用户选中的红包类型优惠券
			getUserChoseRedEnvelopeCoupn(){
				this.$myRequest({
					url:'/eat-service/shopCouponStatistic/getUserChoseRedEnvelopeCoupn',
					data:{
						redEnvelopeType:this.redEnvelopeType,
						userId: this.id
					}
				}).then(res=>{
					this.userCouponList = res.data.obj
				})
			},
			// 初始化查询所有用户领取的优惠券
			getUserReceiveCoupon(){
				this.$myRequest({
					url:'/eat-service/shopCouponStatistic/getUserReceiveCoupon',
					data:{
						userId: this.id,
					}
				}).then(res=>{
					this.userCouponList = res.data.obj
				})
			},
		},
		mounted(){
			// 从头部获取用户id
			this.id = uni.getStorageSync('id')
			// 初始化查询所有用户领取的优惠券
			this.getUserReceiveCoupon()
		},
		onShow(){
			// 初始化查询所有用户领取的优惠券
			this.getUserReceiveCoupon()
			this.redEnvelopeTypeName="全部类型"
		}
	}
</script>

<style>
	.myCoupon{
		width: 418px;
		height: 800px;
		background-color: #F7F7F7;
	}
	.myCoupon_redEnvelopeType{
		width: 418px;
		height: 30px;
		background-color: white;
	}
	.myCoupon_redEnvelopeStyle{
		width: 380px;
		height: 140px;
		background-color: white;
		border-radius: 16px;
		margin-top: 10px;
		margin-left: 20px;
	}
	.myCoupon_redEnvelopesImg{
		width: 66px;
		height: 66px;
		margin-left: 10px;
		margin-top: 10px;
		float: left;
	}
	.myCoupon_myCoupon_redEnvelopeStyleBody{
		width: 200px;
		height: 60px;
		margin-top: 10px;
		margin-left: 10px;
		float: left;
	}
	.myCoupon_redEnvelopePrice{
		width: 90px;
		height: 60px;
		float: left;
		margin-top: 10px;
		text-align: center;
	}
	.myCoupon_p{
		font-size: 20px;
		font-weight: bold;
		color: #FB5D40;
		margin-top: 10px;
	}
	.myCoupon_redEnvelopeBottom{
		width: 360px;
		height: 50px;
		border-top:2px solid #F2F2F2;
		float: left;
		margin-left: 10px;
		margin-top: 10px;
	}
	.myCoupon_CouponButton{
		width: 70px;
		height: 36px;
		color: white;
		border-radius: 16px;
		font-weight: bold;
		margin-top: 10px;
		float:right;
	}
	.myCoupon_redEnvelopeTypeChose{
		width: 120px;
		height: 30px;
		margin-left: 20px;
		overflow: hidden;
		float: left;
	}
</style>